<template>
  <view>
    <u-navbar title="提现" title-size="36" back-icon-color="#333" title-color="#333">
      <!-- <view slot="right">
				<view @click="routeTo('/other/withdrawal-order/withdrawal-order')" style="margin-right: 20rpx;">
					提现记录
				</view>
			</view> -->
    </u-navbar>
    <view class="contentView">
      <view class="headTitle">提现金额</view>
      <view class="inputView">
        <view>¥</view>
        <input
          class="inputData"
          placeholder="输入提现金额"
          placeholder-style="color:#CDCDCD"
          v-model="cash_amount"
        />
      </view>
      <view class="moneyView"
        >可提现金额¥{{ balance }},提现手续费约{{ (balance * 0.0001).toFixed(2) }}；<text
          @click="onAllPost()"
          >全部提现</text
        ></view
      >
    </view>
    <view class="contentView">
      <view @click="current = 1" class="itemView">
        <u-icon name="/static/wxzf.png" size="48"></u-icon>
        <view class="itemTitle">
          提现至微信
          <view class="itemTitle-tip"> 已绑定：张三[更换] </view>
        </view>
        <u-icon v-if="current == 1" name="/static/selected.png" size="36"></u-icon>
        <view v-else class="checked"></view>
      </view>

      <!-- <view @click="current = 2" class="itemView">
				<u-icon name="/static/img/zfbzf.png" size="50"></u-icon>
				<view class="itemTitle">
					提现至支付宝
					<view class="itemTitle-tip">
						已绑定：136*****556[更换]
					</view>
				</view>
				<u-icon v-if="current == 2" name="/static/img/xzz2.png" size="36"></u-icon>
				<view v-else class="checked"></view>
			</view> -->

      <view @click="current = 3" class="itemView">
        <u-icon name="/static/yhk.png" size="64"></u-icon>
        <view class="itemTitle">
          提现至银行卡
          <view class="itemTitle-tip"> 已绑定：6232**********668[更换银行卡] </view>
        </view>
        <u-icon v-if="current == 3" name="/static/selected.png" size="36"></u-icon>
        <view v-else class="checked"></view>
      </view>
    </view>

    <view class="applyView" @click="onApply()">申请提现</view>
    <view class="tipsView">
      <view>温馨提示</view>
      <!-- <view>1、提现手续费约0.1%；（到账金额会根据银行卡实际手续费率扣除）</view> -->
      <view>2、提现时间：9:00~18:00 周一至周六</view>
      <!-- <view>3、到账时间72小时内</view> -->
    </view>
    <u-popup v-model="successPopup" mode="center" border-radius="20">
      <view class="popupView">
        <view class="popupImage">
          <u-icon size="72" name="/static/success.png"></u-icon>
        </view>
        <view style="flex: 1">
          <view class="popupContent">提现申请成功</view>
          <view class="popupContent2">系统将在1-3个工作日内审核完成</view>
          <view class="popupContent2">并打款提现金额到指定账户</view>
        </view>
        <view class="closeBtn" @click="onClose">我知道了</view>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      current: 1,
      successPopup: false,
      balance: 0,
      cardholder: '',
      bank_card_number: '',
      bank_name: '',
      cash_amount: ''
    }
  },
  onLoad() {
    this.initData()
  },
  methods: {
    initData() {
      let self = this
      // self.$u.api.getMyBills().then(res => {
      // 	self.balance = res.data.balance
      // });
      // self.$u.api.getBankList().then(res => {
      // 	if (res.data) {
      // 		self.cardholder = res.data.cardholder;
      // 		self.bank_name = res.data.bank_name;
      // 		self.bank_card_number = res.data.bank_card_number;
      // 	}
      // });
    },
    onClose() {
      this.successPopup = false
      uni.navigateBack()
    },
    onAllPost() {
      this.cash_amount = this.balance
    },
    routeTo(url) {
      uni.navigateTo({
        url
      })
    },
    onApply() {
      let self = this
      if (this.$u.test.isEmpty(this.cash_amount)) {
        this.$u.toast('请输入提现金额')
        if (this.cash_amount < 10) {
          this.$u.toast('请输入提现金额大于10元')
          return
        }
      }
      if (this.$u.test.isEmpty(this.cardholder)) {
        this.$u.toast('请输入持卡人姓名')
        return
      }
      if (this.$u.test.isEmpty(this.bank_card_number)) {
        this.$u.toast('请输入银行卡号')
        return
      }
      if (this.$u.test.isEmpty(this.bank_name)) {
        this.$u.toast('请输入开户银行名称')
        return
      }
      self.$u.api
        .setWithdraw({
          cardholder: this.cardholder,
          bank_name: this.bank_name,
          bank_card_number: this.bank_card_number,
          amount: this.cash_amount
        })
        .then((res) => {
          self.successPopup = true
        })
    }
  }
}
</script>

<style>
/* @import url('withdrawal.css'); */

.contentView {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border-radius: 20rpx;
  margin: 30rpx;
  padding: 30rpx;
}

.headTitle {
  font-size: 32rpx;
  font-weight: 400;
  color: #333333;
}

.checked {
  width: 36rpx;
  height: 36rpx;
  border: #b8b8b8 solid 2rpx;
  border-radius: 36rpx;
}

.inputView {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 20rpx 0px;
  margin: 10rpx 0px;
  border-bottom: 1px solid #e7e7e7;
  font-size: 36rpx;
  font-weight: 400;
  color: #333333;
}

.inputData {
  flex: 1;
  margin-left: 20rpx;
  font-size: 36rpx;
  font-weight: 400;
  color: #333;
}

.moneyView {
  font-size: 28rpx;
  font-weight: 400;
  color: #999999;
  margin-top: 20rpx;
}

.moneyView text {
  font-size: 28rpx;
  font-weight: 400;
  color: #10a28f;
  margin-left: 5rpx;
}

.itemView {
  display: flex;
  flex-direction: row;
  align-items: center;
  border-bottom: 1px solid #e7e7e7;
  padding: 30rpx 0px;
}

.itemView2 {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-top: 30rpx;
}

.itemTitle {
  flex: 1;
  font-size: 28rpx;
  font-weight: 400;
  color: #333;
  margin-left: 20rpx;
}

.itemTitle-tip {
  font-size: 24rpx;
}

.inputData2 {
  flex: 1;
  text-align: right;
  font-size: 28rpx;
  font-weight: 400;
  color: #333;
}

.applyView {
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  border-radius: 40rpx;
  background: #10a28f;
  font-size: 32rpx;
  font-weight: 500;
  color: #ffffff;
  margin: 0rpx 30rpx;
  margin-top: 100rpx;
}

.tipsView {
  display: flex;
  flex-direction: column;
  padding: 30rpx;
  line-height: 200%;
  font-size: 28rpx;
  font-weight: 400;
  color: #666666;
}

.popupView {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 570rpx;
  height: 430rpx;
  background: #ffffff;
  border-radius: 20rpx;
  position: relative;
}

.popupImage {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 60rpx;
}

.popupContent {
  text-align: center;
  margin-top: 30rpx;
  font-size: 28rpx;
  font-weight: 400;
  color: #e5312c;
}

.popupContent2 {
  margin-top: 10rpx;
  text-align: center;
  font-size: 28rpx;
  font-weight: 400;
  color: #333333;
}

.closeBtn {
  width: 200rpx;
  height: 60rpx;
  line-height: 60rpx;
  text-align: center;
  background: #10a28f;
  border-radius: 30rpx;
  font-size: 28rpx;
  font-weight: 400;
  color: #ffffff;
  margin-bottom: 40rpx;
}
</style>
